<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="contentTitle">
                <h2>报价单</h2>
                <div style="float: left;width: 100%;">
                    <h4>名称：<span>{{ quotationDetailData.name }}</span></h4>
                    <h4>用途：<span>{{ quotationDetailData.purpose }}</span></h4>
                    <h4>备注：<span>{{ quotationDetailData.remark }}</span></h4>
                </div>
                <div style="text-align: right;width: 100%;float: left;line-height: 64px;">
                    <h5 style="margin-left: 40px;font-size: 20px;padding-right: 20px;">总金额：<span class="totalClass">{{ quotationDetailData.total }}</span></h5>
                </div>
            </div>
            <hr>
            <hr>
            <el-table
                :data="quotationDetailTableData"
                border
                :header-cell-style="{'background-color':'#EBEEF5','color':'#333333','text-align':'center'}"
                style="width: 100%;height: 56vh;overflow-y: auto;margin-top: 40px;">
                <el-table-column
                    align="center"
                    prop="product.name"
                    label="产品名称">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="optionalConfiguration.name"
                    label="配置">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="unitPrice"
                    label="单价">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="num"
                    label="数量">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="totalPrice"
                    label="总价">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script src="./index.js"></script>

<style scoped>        
.contentTitle{
    width: 100%;
    float: left;
}
h2{
    text-align: center;
    line-height: 72px;
}
h4{
    width: 32.3%;
    float: left;
    line-height: 42px;
    color: #333333;
    padding: 0;
    margin: 0;
    padding-left: 1%;
}
h5{
    float: right;
    color: #999999;
    font-size: 16px;
}
hr,h5,h2{
    padding: 0;
    margin: 0;
}
span.totalClass{
    color: #409EFF;
}
</style>
